import React, {PropTypes} from 'react';
import {routerRedux} from 'dva/router';
import {Row, Col, Card, Collapse, Button, Icon, Dropdown} from 'antd';
import {connect} from 'dva';
import Layout from '../components/Layout/Layout';
import Filter from  '../components/User/Filter'
import List from  '../components/User/List'
import EditModal from  '../components/User/EditModal'
import CreateModal from  '../components/User/CreateModal'
import styles from './User.less';

const Panel = Collapse.Panel;
const ButtonGroup = Button.Group;

function Record({dispatch, user}) {
    const {loading, keyword, total, current, list, activeKey, modalVisible, currentItem, modalType} = user;
    const filterProps = {
        keyword: keyword,
        onSearch(data) {//搜索
            dispatch(routerRedux.push({
                pathname: '/user',
                query: data ? {page: 1, keyword: data} : {page: 1},
            }));
        },
    };
    const listProps = {
        loading,
        total,
        current,
        list,
        onPageChange: function (page) {//page改变
            let temp = {page, keyword};
            dispatch(routerRedux.push({
                pathname: '/user',
                query: keyword ? temp : {page},
            }));
        },
        onEditItem(item) {
            dispatch({
                type: 'user/showModal',
                payload: {
                    modalType: 'update',
                    currentItem: item,
                },
            });
        },
        onDeleteItem(id) {
            dispatch({
                type: 'user/delete',
                payload: id,
            });
        },
    };
    const modalProps = {
        visible: modalVisible,
        item: currentItem,
        modalType,
        onOk(data) {
            dispatch({
                type: `user/${modalType}`,
                payload: data,
            });
        },
        onCancel() {
            dispatch({
                type: 'user/hideModal',
            });
        },
    };

    function onCreateItem() {//创建用户
        dispatch({
            type: 'user/showModal',
            payload: {
                modalType: 'create',
                currentItem: {},
            },
        });
    }

    function onClick() {
        if (activeKey) {//关闭折叠板时重新请求数据
            dispatch(routerRedux.push({
                pathname: '/user',
                query: {page: 1},
            }))
        }
        dispatch({
            type: 'user/updateQueryKey',
            payload: activeKey ? {activeKey: ''} : {activeKey: '1'}
        });
    }

    let Modal = <EditModal {...modalProps} />
    if (modalType == "create") {
        Modal = <CreateModal {...modalProps} />
    }

    return (
        <Layout>
            <div style={{height: '100%'}}>
                <Card title="用户管理" className={styles.my_title} bodyStyle={{background: '#fff', color: '#666'}}>
                    <Row >
                        <Col span={4}>
                            <Button type="primary" style={{height: '38px'}} onClick={onCreateItem}>创建用户</Button>
                        </Col>
                        <Col span={20}>
                            <Collapse accordion activeKey={activeKey}>
                                <Panel header={<div onClick={onClick}>筛选</div>} key="1">
                                    <Filter {...filterProps} />
                                </Panel>
                            </Collapse>
                        </Col>
                        <Col span={24} className={styles.my_space}></Col>
                        <Col span={24}>
                            <List {...listProps}/>
                        </Col>
                        {Modal}
                    </Row>
                </Card>
            </div>
        </Layout>
    );
}

Record.propTypes = {
    dispatch: PropTypes.func,
    user: PropTypes.object,
};

function mapStateToProps({user}) {
    return {user};
}

export default connect(mapStateToProps)(Record);
